<template>
  <!-- 测评报告分享 -->
  <div class="evealuation-share">
    <div class="content-popup">
      <div class="box-left">
        <el-row :gutter="10">
          <el-col :span="boxLeft.labelWidth">
            <span class="label">测试试卷：</span>
          </el-col>
          <el-col :span="24-boxLeft.labelWidth">
            <span class="value">{{shareData.paperName}}</span>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="boxLeft.labelWidth">
            <span class="label">测评时间：</span>
          </el-col>
          <el-col :span="24-boxLeft.labelWidth">
            <span class="value">{{shareData.updateTime}}</span>
          </el-col>
        </el-row>
        <!-- <el-row :gutter="10">
          <el-col :span="boxLeft.labelWidth">
            <span class="label">测评等级：</span>
          </el-col>
          <el-col :span="24-boxLeft.labelWidth">
            <span class="value">--</span>
          </el-col>
        </el-row> -->
        <el-row :gutter="10">
          <el-col :span="boxLeft.labelWidth">
            <span class="label">学生ID：</span>
          </el-col>
          <el-col :span="24-boxLeft.labelWidth">
            <span class="value">{{shareData.studentId}}</span>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="boxLeft.labelWidth">
            <span class="label">学生姓名：</span>
          </el-col>
          <el-col :span="24-boxLeft.labelWidth">
            <span class="value">{{shareData.studentName}}</span>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="boxLeft.labelWidth">
            <span class="label">手机号：</span>
          </el-col>
          <el-col :span="24-boxLeft.labelWidth">
            <span class="value">{{shareData.phoneNo}}</span>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="boxLeft.labelWidth">
            <span class="label">得分：</span>
          </el-col>
          <el-col :span="24-boxLeft.labelWidth">
            <span class="value">{{shareData.studentScore}}</span>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="boxLeft.labelWidth">
            <span class="label">阅读能力评级：</span>
          </el-col>
          <el-col :span="24-boxLeft.labelWidth">
            <span class="value">{{shareData._studentLevel}}</span>
          </el-col>
        </el-row>
      </div>
      <div class="splitline"></div>
      <div class="box-right">
        <div id="qrcode"></div>
        <span class="title-c" style="text-align: center;">微信扫我可预览报告哦</span>
        <span class="title-c">标题：{{shareData.studentName}}的测评报告</span>
        <span class="title-c">分享链接</span>
        <el-input ref="pageurl" style="width:3.37rem;" v-model="pageurl"></el-input>
        <el-button class="ok" type="info" plain @click="copyUrlToClipBord">复制</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'  // 引入qrcode
export default {
  data() {
    return {
      pageurl:window.config.evaluationReportUrl+'/?reportId=',
      boxLeft:{
        labelWidth:7,
      },
      boxRight:{
        labelWidth:4,
      },
      shareData:{},
    };
  },
  methods: {
    init(data){
      this.shareData=data;
      this.pageurl=window.config.evaluationReportUrl+'/?reportId='+data.reportId;
      this.qrcode(this.pageurl);
    },
    /**复制到剪切板 */
    copyUrlToClipBord(){
      this.$refs.pageurl.select();
      let successful = document.execCommand('copy');
      if(successful){
        this.$message({
          message: '成功复制到剪贴板',
          type: 'success'
        });
      }
      else{
        this.$message.error('该浏览器不支持点击复制到剪贴板');
      }
    },
    /**生成二维码 */
    qrcode(url) {
      if(this._qrcode){
        this._qrcode.clear(); // 清除代码
        this._qrcode.makeCode(url); // 生成另外一个二维码
        return;
      }
      let qrcode = new QRCode('qrcode', {
        width: 132,  
        height: 132,
        text: url, // 二维码地址
        colorDark : "#000",
        colorLight : "#fff",
      });
      this._qrcode=qrcode;
    },
  },
  mounted() {
    
  },
  computed: {},
  watch: {},
  created: function() {}
};
</script>

<style lang="scss" scoped>
.evealuation-share {
  .content-popup {
    padding: 0 0.04rem 0.2rem 0.04rem;
		font-size: 0.16rem;
    display: flex;
    .box-left{
      width: 45%;
      .el-row{
        margin-top: 0.20rem;
      }
      .label{
        float: right;
      }
      .value{

      }
    }
    .splitline{
      width: 0.01rem;
      height: 3rem;
      margin: 0 4%;
      background-color: #ebebeb;
      padding: 0.2rem 0;
    }
    .box-right{
      width: 45%;
      .title-c{
        width: 100%;
        display: inline-block;
        margin-bottom: 0.1rem;
      }
      #qrcode{
        display: flex;
        justify-content: center;
        margin: 0.16rem 0 0.05rem 0;
      }
    }
  }
  
}

</style>